<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script src="js/flexible.js"></script>
		<script src="js/echarts.min旧版.js"></script>
		<script>
			function createData(){
				let arr=[]
				for(let i=0;i<7;i++){
					arr.push(Math.round(Math.random()*6000)+1000)
				}
				console.log(arr);
				return arr
			}
			window.onload=function(){
				var chartDom = document.getElementsByClassName('main')[0];
				var myChart = echarts.init(chartDom);
				var option;
				var div=document.getElementsByTagName('div')[0]
				var data1=[createData(),createData()]
				// 刷新数据
				div.onclick=(e)=>{
					data1=[createData(),createData()]
					let aIndex=[...div.children].indexOf(e.target)
					option.series[0].data=data1[aIndex]
					option && myChart.setOption(option);
					console.log(data1[aIndex]);
				}
				option = {
					title:{
						text: 'Confidence Band',
						subtext: 'Example in MetricsGraphics.js',
						// left: 'center',
						borderRadius: 5,
						borderWidth:2,
					},
					legend:{
						show:true,
						padding:10
					},
					toolbox: {
					    feature: {
					      saveAsImage: {}
					    }
					  },
					tooltip: {
					  trigger: 'axis',
					  axisPointer: {
					    type: 'cross',
							label:{
								backgroundColor:"red"
							}
					  }
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						show:true,
						borderColor:'black',
						containLabel: true
					},
					color:['rgb(85, 0, 255)','yellow','green','purple','black'],
				  xAxis: {
				    type: 'category',
				    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
					boundaryGap: false,
					axisLine:{
						symbol:['none','arrow'],
						symbolOffset:[0,20],
						lineStyle:{
							color:"rgb(85, 85, 255)",
						}
					}
				  },
				  yAxis: {
				    type: 'value',
					  splitLine:{
						  lineStyle:{
							  color:"rgb(255, 170, 0)"
						  }
					  },
					  axisLabel:{
						  fontSize:20,
						  color:'red'
					  },
					  axisTick:{
						  show:false
					  }
				  },
				  series: [
				    {
					  name: 'Email',
					  type: 'line',
					  smooth:true,
					  stack: 'Total',
					  data: data1[0],
					  symbol:"rect",
					  symbolSize:12,
					  itemStyle:{
						color:"blue"  
					  },
					  // 展示面积
					  areaStyle: {
							color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{
								offset: 0,
								color: 'rgb(255, 158, 68)'
								},
								{
								offset: 1,
								color: 'rgb(255, 70, 131)'
								}
							]),
							shadowColor:"rgba(0,0,0,0.1)"
					  },
					  // 线条样式
					  lineStyle:{
						  width:4,
						  color:"blue"
					  }
					},
					{
					  name: 'Union Ads',
					  type: 'line',
					  data: [220, 182, 191, 234, 290, 330, 310]
					},
					{
					  name: 'Video Ads',
					  type: 'line',
					  data: [150, 232, 201, 154, 190, 330, 410],
						areaStyle: {
							color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{
								offset: 0,
								color: 'rgb(85, 85, 255)'
								},
								{
								offset: 1,
								color: 'rgb(0, 85, 0)'
								}
							]),
							shadowColor:"rgba(0,0,0,0.1)"
						},
					},
					{
					  name: 'Direct',
					  type: 'line',
					  data: [320, 332, 301, 334, 390, 330, 320]
					},
					{
					  name: 'Search Engine',
					  type: 'line',
					  stack: 'Total',
					  data: [820, 932, 901, 934, 1290, 1330, 1320],
					  areaStyle: {
					  	color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [
					  		{
					  		offset: 0,
					  		color: 'rgb(170, 255, 0)'
					  		},
					  		{
					  		offset: 1,
					  		color: 'rgb(0, 0, 255)'
					  		}
					  	]),
					  	shadowColor:"rgba(0,0,0,0.1)"
					  },
					}
				  ]
				};
				
				option && myChart.setOption(option);
				window.addEventListener('resize',()=>{
					myChart.resize()
				})
			}
		</script>
		<div>
			<a href="#">to data1</a>
			<a href="#">to data2</a>
		</div>
		<div class="main" style="width: 9rem;height: 5rem;margin-top: 50px;"></div>
	</body>
</html>